<style lang="less">

</style>

<template>
  <div>
    <!-- 签收确认  弹窗 -->
    <!--确认收款-->
    <el-dialog title="付款确认" size="tiny" :visible.sync="paymentConfirmationDialog">
      <div style="background: #F2F2F2;">
        <el-row class="f-pt10 f-mb0">
          <el-col :span="12">
            <div class="grid-content f-ml10">订单编号：<label v-html="orderNumberPayHtml"></label></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">订单运费：<label v-html="orderFreight"></label></div>
          </el-col>
        </el-row>
        <el-row class="f-mb0">
          <el-col :span="12">
            <div class="grid-content f-ml10">结算方式：<label v-html="orderPaymentType"></label></div>
          </el-col>
        </el-row>
        <el-row class="f-mb0">
          <el-col :span="12">
            <div class="grid-content f-ml10">代收货款：<label v-html="collectPaymentAmount"></label></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark f-ml10 f-cr">应收总金额：<label
              v-html="orderTotalMoney"> </label></div>
          </el-col>
        </el-row>
      </div>
      <el-row class="f-mb0" style="display: none">
        <el-col :span="24" class="f-ml10 f-mt10">
          <div class="grid-content bg-purple-dark">
            <el-radio class="radio" v-model="orderPayRadio" label="accountPay"> 账户余额：可支付余额: 0元
            </el-radio>
          </div>
        </el-col>
      </el-row>
      <el-row class="f-mb0">
        <el-col :span="24" class="f-ml10">
          <div class="grid-content bg-purple-dark">其他支付方式</div>
        </el-col>
      </el-row>
      <el-row style="background: #F2F2F2;">
        <el-col :span="24" class="f-mb20 f-ml10">
          <div class="grid-content bg-purple-dark">
            <div class="grid-content">
              <div>
                <p>请选择一下支付方式的一种</p>
                <el-row class="f-pb10 f-pl10">
                  <el-col :span="8">
                    <el-radio class="radio" v-model="orderPayRadio" label="aliPay">
                      <img src="../../assets/aliPayLogo.png" class="f-w80"></el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio class="radio" v-model="orderPayRadio" label="weChatPay"><img
                      src="../../assets/weChatLogo.png" class="f-w80"></el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio class="radio" v-model="orderPayRadio" label="unionPay"><img
                      src="../../assets/unionPayLogo.png" class="f-w80"></el-radio>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
                <el-button @click="paymentConfirmationDialog = false" class="f-wa">取 消</el-button>
                <el-button type="primary" @click="paymentAffirms" class="f-wa">确 定</el-button>
            </span>
    </el-dialog>

    <el-dialog title="请使用微信客户端扫一扫支付" :visible.sync="wechatQRCodeDialog"
               size="tiny">
      <div v-html="QRCodehtml">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { aliPay, accountPay, unionPay, wechatPay, payments } from '../../api/pay/pay.js';
import { isEmpty } from '../../lib/util';
export default {
  name: 'SignOffPaymentConfirm',
  componentName: 'SignOffPaymentConfirm',
  data () {
    return {
      orderId: null,
      orderPayRadio: '',
      orderNumberPayHtml: '',
      orderFreight: '',
      orderPaymentType: '',
      orderTotalMoney: '',
      collectPaymentAmount: 0,
      wechatQRCodeDialog: false,
      paymentConfirmationDialog: false,
      QRCodehtml: '',
      notSignOffCurrentData: null
    };
  },
  methods: {
    show (o) {
      if (o.payStatus === 101003002 && o.collectionDeliveryStatusName === 102004002) {
        return this.$message.success('订单已支付');
      }
      if (o.paymentType !== 102002002 && (isEmpty(o.collectPaymentAmount) || o.collectPaymentAmount <= 0)) {
        return this.$message.error('目前只支持未支付的到付和代收收款的方式');
      }
      this.orderId = o.orderId;
      this.orderNumberPayHtml = o.orderNumber;
      if (o.payStatus === 101003002) {
        this.orderFreight = 0.0;
      } else {
        this.orderFreight = o.freightPrice;
      }
      if (o.collectionDeliveryStatusName === 102004002) {
        this.collectPaymentAmount = 0.0;
      } else {
        this.collectPaymentAmount = o.collectPaymentAmount;
      }
      this.orderPaymentType = o.paymentTypeName;
      if (o.payStatus === 101003002 && o.collectionDeliveryStatusName !== 102004002) {
        if (o.collectPaymentAmount !== null) {
          this.orderTotalMoney = parseFloat(o.collectPaymentAmount).toFixed(2);
        } else {
          this.orderTotalMoney = 0.00;
        }
      } else if (o.payStatus !== 101003002 && o.collectionDeliveryStatusName === 102004002) {
        this.orderTotalMoney = parseFloat(o.freightPrice).toFixed(2);
      } else {
        if (o.collectPaymentAmount !== null) {
          this.orderTotalMoney = (parseFloat(o.freightPrice) + parseFloat(this.collectPaymentAmount)).toFixed(2);
        } else {
          this.orderTotalMoney = parseFloat(o.freightPrice).toFixed(2);
        }
      }
      this.paymentConfirmationDialog = true;
    },
    paymentAffirms () {
      localStorage.setItem('back_url', this.$route.path);
      switch (this.orderPayRadio) {
        case 'accountPay':
          accountPay({
            orderId: this.orderId, // 订单id
            couponId: '', // 优惠券id
            couponUseId: ''// 优惠券领用id
          }).then((res) => {
            window.document.write(res.data);
          });
          break;
        case 'aliPay':
          aliPay({
            orderId: this.orderId, // 订单id
            couponId: '', // 优惠券id
            couponUseId: ''// 优惠券领用id
          }).then((res) => {
            window.document.write(res.data);
          });
          break;
        case 'weChatPay':

          wechatPay({
            orderId: this.orderId, // 订单id
            couponId: '', // 优惠券id
            couponUseId: ''// 优惠券领用id
          }).then((res) => {
            this.wechatQRCodeDialog = true;
            let com = 'http://qr.liantu.com/api.php?text=';
            let url = com + res.data.obj.codeUrl;
            this.QRCodehtml = '<img style="width: 100%;margin: auto" src=' + url + ' />';
            this.stopPayWeChat = setInterval(() => {
              this.refreshOrderPayWeChat(res.data.obj.serialNo);
            }, 5000);
          });
          break;
        case 'unionPay':
          unionPay({
            orderId: this.orderId, // 订单id
            couponId: '', // 优惠券id
            couponUseId: ''// 优惠券领用id
          }).then((res) => {
            window.document.write(res.data);
          });
          break;
      }
    },
    refreshOrderPayWeChat (val) {
      payments(val).then((res) => {
        if (res.data.obj.successFlg) {
          clearInterval(this.stopPayWeChat);
          this.$message.success('支付成功');
          location.reload();
        }
      });
    }
  }
};
</script>
